<script setup>
import Header from  "@/components/header/Header.vue"
import CommodityCard from "@/components/scenic-card/ScenicCard.vue"

import {ref} from "vue"
import api from "@/api/index.js"

let params = {
  pageNum: 1,
  pageSize: 10,
  scenicType: 0,
}
const refreshing = ref(false)
const list = ref([])
const totalCount = ref(0)
const loading = ref(false)
const error = ref(false);
const finished = ref(false)

const onRefresh = () => {
  params.pageNum = 1
  list.value = []
  onLoad()
}

const onLoad = () => {
  api.getSelectedScenicSpots(params).then((res) => {
    list.value = [...list.value, ...res.data.list]
    totalCount.value = res.data.totalCount
    params.pageNum += 1
    if (list.value.length >= res.data.totalCount) {
      finished.value = true
    }
  }).catch(() => {
    error.value = true;
  }).finally(() => {
    loading.value = false
    refreshing.value = false
  })
}

</script>

<template>
  <div class="scenic_list_page">
    <Header title="优质景区" :back="true" />
    <van-pull-refresh
      class="van_pull_refresh"
      v-model="refreshing"
      @refresh="onRefresh"
      :disabled="loading || error"
    >
      <van-list
        class="scenic_list"
        v-model:loading="loading"
        v-model:error="error"
        :finished="finished"
        finished-text="没有更多了"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <CommodityCard class="list" v-for="item in list" :key="item" :data="item" />
      </van-list>

    </van-pull-refresh>
  </div>
</template>

<style scoped lang="scss">
.scenic_list_page {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .van_pull_refresh{
    flex: 1;
    background: #F9F8F3;
    .scenic_list{
      height: 100%;
      overflow-y: auto;
      .list{
        margin: 1.5rem;
      }
    }
  }
}
</style>